import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
import { recommendData, adData, videoData } from '@/common/homePage';
import TriangleDown from '@/images/triangleDown';
// import TriangleUp from '@/images/TriangleUp';
import Comment from '@/images/comment';
import Report from '@/images/report';
import Heart from '@/images/heart';
import Share from '@/images/share';
import Star from '@/images/star';
import ArrowDown from '@/images/arrowDown';
import styles from './recommend.less';
interface RecommendProps {
  data: recommendData & adData & videoData;
}

const Recommend: React.FC<RecommendProps> = props => {
  const { data } = props;
  const [isVoteup, setVoteup] = useState<boolean>(false); // 赞同
  const [isOppose, setOppose] = useState<boolean>(false); // 反对
  const [isCollapsed, setCollapsed] = useState<boolean>(true); // 是否折叠内容
  const getCollapsedHtml = useMemo<string>((): string => {
    if (data.type === 'feed_advert') {
      return '';
    } else {
      if (data.target && data.target.type === 'answer') {
        return data.target.author.name + ': ' + data.target.excerpt_new.substring(0, 100) + '…';
      } else if (data.target && data.target.type === 'zvideo') {
        return '';
      } else if (data.target && data.target.type === 'article') {
        return data.target.author.name + ': ' + data.target.excerpt_new.substring(0, 100) + '…';
      } else {
        return '';
      }
    }
  }, [data.target, data.type]);

  const titleMemo = useMemo<JSX.Element>(() => {
    let value: string = '';
    let url: string = '';
    if (data.type === 'feed_advert') {
      if (data.ad) {
      }
    } else {
      if (data.target && data.target.type === 'answer') {
        value = data.target.question.title;
        url =
          'https://www.zhihu.com/question/' + data.target.question.id + '/answer/' + data.target.id;
      } else if (data.target && data.target.type === 'zvideo') {
        value = data.target.title;
        url = 'https://www.zhihu.com/zvideo/' + data.target.id;
      } else if (data.target && data.target.type === 'article') {
        value = data.target.title;
        url = 'https://zhuanlan.zhihu.com/p/' + data.target.id;
      } else {
        value = '';
        url = '';
      }
    }
    return (
      <h2 className={styles['ContentItem-title']}>
        <a href={url}>{value}</a>
      </h2>
    );
  }, [data]);

  return (
    <div className={styles['TopstoryItem-isRecommend']}>
      <div>{titleMemo}</div>
      <div className={styles['RichContent']}>
        {/* 折叠内容 start */}
        {(data.target.thumbnail || data.target.image_url) && isCollapsed && (
          <div className={styles['RichContent-cover']}>
            <div className={styles['RichContent-cover-inner']}>
              <img src={data.target.thumbnail || data.target.image_url} alt="" />
            </div>
          </div>
        )}
        {isCollapsed && (
          <div
            className={styles['RichContent-inner']}
            onClick={() => {
              setCollapsed(false);
            }}
          >
            <span dangerouslySetInnerHTML={{ __html: getCollapsedHtml }}></span>
            <button type="button" className={`button`}>
              阅读全文
            </button>
          </div>
        )}
        {/* 折叠内容 end */}

        {/* 详细内容 start */}
        {!isCollapsed && (
          <div>
            <div className={styles['AuthorInfo-content']}>
              <span className={styles['AuthorInfo-img']}>
                <a href={'https://www.zhihu.com/people/' + data.target.author.url_token}>
                  <img src={data.target.author.avatar_url} alt="" />
                </a>
              </span>
              <span className={styles['AuthorInfo-name']}>{data.target.author.name}</span>
            </div>
            <div className={styles['voteup-title']}>{data.target.voteup_count}人赞同了该回答</div>
            <div className={`${styles['RichContent-inner']} ${styles['detail']} detail`}>
              <span dangerouslySetInnerHTML={{ __html: data.target.content }}></span>
            </div>
          </div>
        )}
        {/* 详细内容 end */}
        <div className={styles['ContentItem-actions']}>
          <span>
            <button
              className={`button ${styles['VoteButton']} ${isVoteup ? styles['is-active'] : ''}`}
              onClick={() => {
                setVoteup(!isVoteup);
                setOppose(false);
              }}
            >
              <span className={styles['Votespan']}>
                {/* <TriangleUp></TriangleUp> */}
              </span>
              赞同 {data.target.voteup_count}
            </button>
            <button
              className={`button ${styles['VoteButton']} ${styles['VoteButton--down']} ${
                isOppose ? styles['is-active'] : ''
              }`}
              onClick={() => {
                setVoteup(false);
                setOppose(!isOppose);
              }}
            >
              <span className={styles['icon-span']}>
                <TriangleDown></TriangleDown>
              </span>
            </button>
          </span>
          <button
            type="button"
            className={`button ${styles['button-withIcon']} ${styles['ContentItem-action']}`}
          >
            <div>
              <span className={styles['icon-span']}>
                <Comment></Comment>
              </span>
              {data.target.comment_count}条评论
            </div>
          </button>
          <button
            type="button"
            className={`button ${styles['button-withIcon']} ${styles['ContentItem-action']}`}
          >
            <span className={styles['icon-span']}>
              <Share></Share>
            </span>
            分享
          </button>
          <button
            type="button"
            className={`button ${styles['button-withIcon']} ${styles['ContentItem-action']}`}
          >
            <span className={styles['icon-span']}>
              <Star></Star>
            </span>
            收藏
          </button>
          {data.type === 'article' && (
            <button
              type="button"
              className={`button ${styles['button-withIcon']} ${styles['ContentItem-action']}`}
            >
              <span className={styles['icon-span']}>
                <Report></Report>
              </span>
              举报
            </button>
          )}
          <button
            type="button"
            className={`button ${styles['button-withIcon']} ${styles['ContentItem-action']}`}
          >
            <span className={styles['icon-span']}>
              <Heart></Heart>
            </span>
            喜欢
          </button>
          <button
            type="button"
            className={`button ${styles['button-withIcon']} ${styles['ContentItem-action']}`}
          >
            <span></span>...
          </button>
          {!isCollapsed && (
            <button
              type="button"
              className={`button ${styles['button-withIcon']} ${styles['ContentItem-rightButton']}`}
              onClick={() => {
                setCollapsed(true);
              }}
            >
              <span>收起</span>
              <span className={`${styles['icon-span']} ${styles['ArrowDown']}`}>
                <ArrowDown></ArrowDown>
              </span>
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

export default Recommend;
